<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>实时监测</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="../../../assets/theme-chalk/index.css">
    <!--全局css-->
    <link rel="stylesheet" href="../../../style.css">
    <style>

        .page{
            font-family:"微软雅黑",Arial;
        }
        .paramSpan{
            font-size: 18px;
            cursor: pointer;
        }
        .slider {
            width: 35px;
            height: 35px;
            cursor: pointer;
            position: absolute;
        }
        .img{
            width: 35px;
            height: 35px;
        }
        .devSpan{
            top: 40px;
            position: relative;
            white-space: nowrap;
        }
        .chart-outer {
            height: 200px;
        }
        .panel {
            padding: 10px;
            border: solid 1px #D8D8D8;
            background: #fff;
            margin-bottom: 20px;
        }
        .panel .panel-title {
            border-bottom: solid 1px #D8D8D8;
            padding-bottom: 5px;
            margin-bottom: 10px;
        }
        .panel-f {
            text-align: center;
            color: #485465;
            width: 83%;
            background: #BDD0DD;
            border-radius: 5px;
            border: 0px;
            height: 60px;
            padding-top: 5px;
        }
        .panel-f p {
            margin-bottom: 0px;
            white-space: nowrap;
        }
        .panel-f h5 {
            font-weight: 700;
            margin-top: 10px;
        }
        .panel-f:last-child {
            margin-right: -5px;
        }
        .chart-outer {
            height: 300px;
        }
        .deviceInfo {
            height: 300px;
        }
        .attr {
            margin: 0px;
            padding: 0px;
            /* float: left; */
            border: solid 2px #9699A4;
            width: 70%;
            background: #f5f5f5;
            border-radius: 10px;
            overflow: hidden;
            padding: 10px;
            margin: 20px;
            font-size: 15px;
            line-height: 40px;
        }
        li {
            list-style-type: none;
        }
        .paramDiv {
            width: 100%;
            background: #fff;
            height: auto;
        }
         .note {
            padding-top: 38px;
            margin-bottom: 10px;
            background: url(../../../imgs/bg-note-top.png) top center no-repeat;
        }
        .note-container {
            text-indent: 2em;
            background: url(../../../imgs/bg-note-middle.png) top center repeat-y;
            overflow: hidden;
        }
         .note-bottom {
            padding-bottom: 34px;
            background: url(../../../imgs/bg-note-bottom.png) bottom center no-repeat;
        }
    </style>

</head>
<body>

<div class="page" id="page-vue"  :style="{height:height+'px'}">

        <el-container>
            <el-aside v-bind:style="{width:width+'px'}">
                <h2 style="text-align: center">场景列表</h2>
                <el-menu class="el-menu-vertical-demo" @select="handleSelect" background-color="#ecf8ff" :default-active="sceneIndex">
                    <el-menu-item v-for="(item, index) in sceneList" :index="index">
                        <i class="el-icon-document"></i>
                        <span slot="title">{{item.SceneName}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <el-main>
                <el-tooltip effect="dark" content="点击缩放" v-model="tooltip" placement="right">
                <el-button class="icon iconfont icon-full" circle @click="changeFull"></el-button>
                </el-tooltip>
                <div id="box" style="margin: auto">
                </div>
            </el-main>
            <el-aside v-bind:style="{width:width+'px'}">
                <p style="text-align: center; position: relative; top: 30px;z-index: 99999; color: red;">实时预警消息</p>
                <div v-if="items.length==0">
                    <div class="note" style="z-index: 1000; font-family: simsun;">
                        <div class="note-container">
                            暂无告警
                        </div>
                    </div>
                </div>
                <div v-if="items.length!=0">
                <el-carousel height="200px" direction="vertical" :autoplay="true" interval="3000" modal="false" indicator-position="none">
                    <el-carousel-item v-for="item in items" :key="item" >
                        <div class="note" style="z-index: 1000; font-family: simsun;">
                            <div class="note-container">
                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col :span="10"><div>项目名称</div></el-col>
                                    <el-col :span="14"><div>{{item.ProjectName}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">
                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col  :span="10"><div>设备名称</div></el-col>
                                    <el-col :span="14"><div>{{item.DevName}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">

                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col  :span="10"><div>报警类型</div></el-col>
                                    <el-col :span="14"><div>{{item.ErrorName}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">
                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col  :span="10"><div>发生时间</div></el-col>
                                    <el-col :span="14"><div style="white-space: nowrap">{{item.LogTime}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">
                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col  :span="10"><div>联系人</div></el-col>
                                    <el-col :span="14"><div>{{item.manager}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">

                                <el-row type="flex" class="row-bg" justify="space-between">
                                    <el-col :span="10"><div>电话</div></el-col>
                                    <el-col :span="14"><div>{{item.phone}}</div></el-col>
                                </el-row>
                            </div>
                            <div class="note-container">

                                <el-row type="flex" class="row-bg" justify="end">
                                    <el-col :span="6">
                                        <el-button size="mini" round icon="el-icon-mobile-phone" v-on:click="dispatch(item)">
                                        </el-button>
                                    </el-col>
                                    <el-col  :span="6">
                                        <el-button size="mini" round icon="el-icon-info" v-on:click="handleDetail(item)">
                                        </el-button>
                                    </el-col>
                                </el-row>
                            </div>
                            <div class="note-bottom">
                            </div>
                        </div>
                    </el-carousel-item>
                </el-carousel>
                </div>
            </el-aside>
        </el-container>

        <el-dialog title="实时数据" :visible.sync="devVisible" width="70%" style="margin-top:10px;height: 80%" @close='closeDialog' :close-on-click-modal="false">

                <el-row>
                    <el-col :span="10">
                        <div class="deviceInfo">
                            <ul class="attr">
                                <li>设备名称:　　{{device.DeviceName}}</li>
                                <li>设备编号:　　{{device.DeviceID}}</li>
                                <li>所属区域:　　{{device.zoneName}}</li>
                                <li>所属部门:　　{{device.DepartmentName}}</li>
                                <li>设备状态:　　<span v-if="device.online==1">在线</span><span v-else-if="device.online==0">离线</span></li>
                                <li>最近时间:　　{{device.updateTime}}</li>
                            </ul>
                        </div>

                    </el-col>
                    <el-col :span="14">
                        <div class="chart-outer" id="realChart">

                        </div>
                    </el-col>
                </el-row>
                <div class="paramDiv" >
                    <el-row style="flex-wrap: nowrap">
                        <el-col :span="3" v-for="(item,index) in  paramData">
                            <div class="panel panel-f" @click="loadDeviceParam(index)">
                                <p>{{item.dp_name}}</p>
                                <h5>{{item.dp_value}}{{item.dp_unitid}}</h5>
                            </div>
                        </el-col>
                    </el-row>
                </div>


        </el-dialog>

    <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="600" >
        <el-card>
            <el-form :inline="true" label-width="100px">
                <el-form-item label="接收人(*)">
                    <el-select v-model="dptchForm.toUserId">
                        <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                    </el-select>
                </el-form-item>
                <el-col :span="24">
                    <el-form-item label="报警详情(*)">
                        <el-input type="textarea" style="width:350px;" v-model="dptchForm.alarmMsg"></el-input>
                    </el-form-item>
                </el-col>
                <el-form-item>
                    <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </el-dialog>

</div>


<script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
<script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>

<script>

    let vuePageIndex = new Vue({
        el: '#page-vue',
        data: {
            proNo: '',
            sceneList:[],
            img:{
                'Electric':'../../../imgs/electric.png',
                'Water':'../../../imgs/water.png'
            },
            devVisible:false,
            device:'',
            paramData:'',
            index:0,
            time1:'',
            width:240,
            items:[],
            tooltip:false,
            editAlarmVisible: false,
            childUsers: [],
            dptchForm: {
                alarmId: '',
                alarmName: '',
                alarmMsg: '',
                toUserId: ''
            },
            activeId:0,
            timer:null,
            sceneIndex:0,
            height:0,
        },
        methods: {
            changeFull(){
             this.width= this.width==240?0:240;
            },
            handleSelect(key) {
                this.sceneIndex = key
                this.setBoxImg(key);
                $('#box').empty();
                HttpUtil.get('ScadaDevice/List',{SceneID:this.sceneList[key].SceneID,pointType:-1}).success((res)=>{
                    for (let item of res.data){
                        $('#box').append('<div  id= ' + item.DeviceID + ' class="slider" title='+item.DeviceName+'><span class="devSpan">'+item.DeviceName+'</span></div>');
                        let color =['green','grey','red'];
                        let style = {
                            left:item.Left1+ 'px',
                            top:item.Top+ 'px',
                            background:"url("+this.img[item.deviceType]+")",
                            color:color[item.devStatus-1],
                        }
                        for (let k in style) {
                            document.getElementById(item.DeviceID).style[k] = style[k];
                        }
                        $('#'+item.DeviceID).on("click",()=>{
                            this.devReal(item.DeviceID);
                        });
                    }
                })
                HttpUtil.get('ScadaTag/List',{SceneID: this.sceneList[key].SceneID,}).success((res)=>{
                    for (let item of res.data){
                        $('#box').append('<div  id= ' + item.DeviceID +'-'+item.field+' class="paramSpan">'+item.field+'-'+item.value+'</div>');
                        let style = {
                            left:item.Left1+ 'px',
                            top:item.Top+ 'px',
                            color:'blue',
                            position: "absolute",
                        }
                        for (let k in style) {
                            document.getElementById(item.DeviceID+'-'+item.field).style[k] = style[k];
                        }
                    }
                }) ;
            },
            devReal(id){
                this.devVisible = true;
                this.getDeviceData({deviceId:id});
                clearInterval(this.time1);
                clearInterval(this.timer);
                this.time1=setInterval(()=>{
                    this.getDeviceData({deviceId:id});
                },30000)
            },
            closeDialog(){
                clearInterval(this.time1);
                this.startTimer();
                this.devVisible = false;
            },
            loadDeviceParam(index) {
                this.index = index;
                this.getChart('realChart',this.paramData[index]);

            },
            getChart: function (id, data) {
                let myChart = echarts.init(document.getElementById(id));
                var option = {
                    tooltip: {},
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: data.dp_name,
                            type: 'gauge',
                            min: 0,
                            max: data.dp_value*1.4,
                            splitNumber: 8,
                            detail: {formatter: data.dp_value+data.dp_unitid},
                            data: [{value: data.dp_value, name: data.dp_name}],
                            radius: "100%", //仪表大小
                        }
                    ]
                };
                myChart.setOption(option);
            },
            getDeviceData(params){
                HttpUtil.get('device/getById',params).success((res)=>{
                    this.device = res.data
                    HttpUtil.get('device/Monitor',params).success((res)=>{
                        this.paramData = res.data
                        this.getChart('realChart',this.paramData[this.index]);
                    })
                })
            },
            setBoxImg(index){
                $("#box").css("background-image", "url('')");
                // 根据索引 设置 不同场景的 不同背景图
                if (this.sceneList[index].ImageName != null) {
                    let img = new Image();
                    img.src = 'http://iot.hzcando.com:10004' + this.sceneList[index].ImageName;
                    if (img.complete) {
                        let style = {
                            position: "relative",
                            width: img.width +"px",
                            height: img.height +"px",
                            top: "10px",
                            left: "10px",
                        }
                        for (let key in style) {
                            document.getElementById('box').style[key] = style[key];
                        }
                        $("#box").css("background-image", "url(" + img.src + ")");
                    } else {
                        img.onload = function () {
                            let style = {
                                position: "relative",
                                width: img.width +"px",
                                height: img.height +"px",
                                top: "10px",
                                left: "10px",
                            }
                            for (let key in style) {
                                document.getElementById('box').style[key] = style[key];
                            }
                            $("#box").css("background-image", "url(" + img.src + ")");
                            img.onload = null;//避免重复加载
                        }
                    }
                }
            },
            loadDatas: function () {
                var _self = this;
                HttpUtil.get('Error/List', {
                    ProcessFlag: 0,
                }).success((data) => {
                    var datas = data.data;
                    for (var i = 0; i < datas.length; i++) {
                        datas[i].LogTime = datas[i].LogTime.replace("T", " ");
                    }
                    _self.items = datas;
                });
            },
            dispatch: function (row) {
                this.dptchForm.alarmId = row.Id;
                this.dptchForm.alarmName = row.ErrorName;
                this.dptchForm.alarmMsg = row.ErrorName;
                this.editAlarmVisible = true;
            },
            onSaveDptch: function () {
                var _self = this;
                var param = {
                    wf_operation: "手工开单",
                    wf_businesstype: 5,
                    wf_eventName: this.dptchForm.alarmName,
                    wf_eventMsg: this.dptchForm.alarmMsg,
                    wf_objType: 5,
                    wf_objid: this.dptchForm.alarmId,
                    wf_to: this.dptchForm.toUserId,  //接收人Id
                    wf_seqno: 0
                };
                HttpUtil.get('WorkFlow/Add', param).success(function (data) {
                    if (data.state == 0) {
                        _self.$message({
                            message: '派单成功！',
                            type: 'success'
                        });

                        for (var i = 0; i < _self.items.length; i++) {
                            if (_self.items[i].Id == _self.dptchForm.alarmId) {
                                _self.items[i].ProcessFlag = 1;
                                _self.items[i].ProcessFlag_Text = '已派单';
                                break;
                            }
                        }

                        _self.editAlarmVisible = false;
                        _self.startTimer();

                    } else {
                        _self.$message({
                            message: '派单失败！',
                            type: 'error'
                        });
                    }
                });
            },
            handleDetail:function (item) {
                HttpUtil.get('ScadaScene/ByDeviceIDList',{DeviceID:item.DeviceNo}).success((res)=>{
                          this.searchScenId(res.data[0].SceneID);
                })
            },
            searchScenId(Id){
               for (let i = 0;i<this.sceneList.length;i++){
                    if (Id==this.sceneList[i].SceneID){
                        this.sceneIndex = i;
                         this.handleSelect(this.sceneIndex);

                         return;
                    }
               }
            },
            startTimer(){
                this.timer = setInterval(()=>{
                    this.loadDatas();
                    this.handleSelect(this.sceneIndex);
                },30000)
            }
        },
        created: function () {
            this.proNo = HttpUtil.getQueryString('proNo');
            HttpUtil.get('User/Child').success((data)=> {
                this.childUsers = data.data;
            });
            HttpUtil.get('ScadaScene/List',{projectNo:this.proNo}).success((res)=>{
                this.sceneList = res.data;
                this.loadDatas();
                this.handleSelect(this.sceneIndex);
            })
            this.startTimer();
            this.height = window.innerHeight;
        },
        mounted: function () {
            this.tooltip = true;
        }
    });


</script>

</body>
</html>
